<template>
  <view class="service-list">
    <uni-tab :tabTitle="tabTitle" @change="onTabChange">
      <view slot="content">
        <view class="list">
          <view
            class="item box border border-bottom pointer"
            v-for="(item, index) in services"
            :key="index"
            @tap="toDetailPage(item)"
          >
            <!-- 封面 -->
            <view class="image mr-10">
              <image class="block" :src="item.cover || defaultImage" />
            </view>

            <!-- 信息 -->
            <view class="info box box-column box-between">
              <view class="name fz-15 bold">{{item.cate_name}}</view>
              <view class="money cl-main">￥{{item.cash}}</view>

              <!-- 评分 -->
              <view class="rate box fz-12 cl-second">
                <view class="mr-10">
                  <text class="cl-main">{{item.good_comment || 0}}</text>
                  <text>条好评</text>
                </view>
                <view class="mr-10">
                  <text class="cl-main">{{item.percent || 0}}%</text>
                  <text>好评率</text>
                </view>
                <view>
                  <text class="cl-main">{{item.sales_num || 0}}</text>
                  <text>单服务</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 加载更多组件 -->
        <uni-load-more :status="loadMoreStatus" @retry="listServiceByShop"></uni-load-more>
      </view>
    </uni-tab>
  </view>
</template>

<script>
import uniTab from "@/components/tab";
import uniLoadMore from "@/components/loadMore";

import { listServiceByShop } from "@/apis/service";

export default {
  name: "serviceList",

  props: {
    info: {
      type: Object,
      default: {}
    }
  },

  data() {
    return {
      sort: 1,
      page: 1,
      services: [],
      tabTitle: ["综合", "销量", "好评数", "价格高低"],
      loadMoreStatus: 1,
      defaultImage: this.$config.default
    };
  },

  created() {
    this.listServiceByShop();
    uni.$on("reachBottom", this.listServiceByShop);
  },

  methods: {
    /**
     * 获取服务列表
     */
    async listServiceByShop(refresh = false) {
      try {
        // 刷新重置
        if (refresh) {
          this.page = 1;
          this.services = [];
        }

        let params = {
          shop_id: this.info.id,
          desc: this.sort,
          page: this.page
        };

        this.loadMoreStatus = 0; // 开始请求

        let { code, data } = await listServiceByShop(params);

        if (code == 200) {
          // 刷新重置
          if (refresh) {
            this.page = 1;
            this.services = [];
          }

          this.services = this.services.concat(data.data || []);
          this.loadMoreStatus = 1; // 请求成功
          this.page += 1;

          if (data.data.length == 0) this.loadMoreStatus = 3; // 没有更多了
          if (data.total == 0) this.loadMoreStatus = 5; // 毛都没
        } else {
          this.loadMoreStatus = 2; // 请求失败
        }
      } catch (err) {
        this.loadMoreStatus = 2; // 请求失败
      }
    },

    onTabChange(data) {
      let { index } = data;

      if (index == 0) this.sort = 1;
      else if (index == 1) this.sort = 3;
      else if (index == 2) this.sort = 4;
      else if (index == 3) this.sort = 2;

      this.listServiceByShop(true);
    },

    toDetailPage(item) {
      return uni.navigateTo({
        url: `/service/detail?id=${item.id}&type=2`
      });
    }
  },

  components: {
    uniTab,
    uniLoadMore
  }
};
</script>

<style lang="scss" scoped>
.service-list {
  .list {
    .item {
      padding: 30upx 20upx;

      .image {
        image {
          width: 140upx;
          height: 140upx;
        }
      }
    }
  }
}
</style>
